<!--管理员=》商家列表-->
<template>
	<div>
	  <MainContent>
		 <div class="content_title">
		 	<span style="color: #222222;font-size: 24px;font-weight: 400;">{{title}}</span>
		</div>
		 <div class="table_content">
		 	<el-row>
		 		<div style="display: flex;justify-content: space-between;align-items: center;">
				  <el-input
				    placeholder="请输入用户名或用户编号"
						style="width:320px;"
				    v-model="UserInput">
						<el-button slot="append" icon="el-icon-search" @click="SearchUser"></el-button>
				  </el-input>
		 		  <button class="el-button mini confirmE" @click="TaoBaoConfirm"> 淘宝认证审核</button> 	 
				  
			   </div>
			   <el-table
		        ref="multipleTable"
		        :data="userListData"
		        style='width: 99%;margin-top: 50px;'
		        tooltip-effect="dark">
		        <el-table-column
		          align="center"
		          type='index'
		          label="#">
		        </el-table-column>
		        <el-table-column
		          align="center"
		          prop="UserName"
		          label="用户昵称">
		        </el-table-column>
		        <el-table-column
		          align="center"
		          prop="UserNo"
		          label="用户编码">
		        </el-table-column>
		        <el-table-column
		          align="center"
		          prop="UserScore"
		          label="用户积分">
		        </el-table-column>
		        <el-table-column
		          align="center"
		          prop='Level'
		          label="淘宝等级">
		        </el-table-column>
		       	<el-table-column
		          align="center"
		          prop='NoComplete'
		          label="未完成次数">
		        </el-table-column>
				<el-table-column
					align="center"
					prop='TimeOut'
					label="超时退出次数">
				</el-table-column>
		        <el-table-column
		          align="center"
		          label="操作">
		          <template slot-scope="scope">

				        <el-button 
				        	v-if="scope.row.IsBlack == '1'" 
				        	type='info'
				        	size='mini' 
									@click="userGoDown(scope.$index, scope.row)">恢复</el-button>
				        <el-button 
				        	   v-else
				              size="mini"
				              type='primary'
				              @click="userGoDown(scope.$index, scope.row)">拉黑</el-button>
				   </template>
		        </el-table-column>
		     </el-table>
		 	</el-row>
		 	<el-row style='margin-top: 20px;text-align: center;'>
			 	<el-pagination 
					  @current-change="handleCurrentChange"
					  :current-page="currentPage"
		        	   layout="prev, pager, next" 
		        	   page-size='10'
		        	  :total="allPage" 
		        	>
		        </el-pagination>
		 	</el-row>
		 </div>
		 
		 <el-dialog title="拉黑用户" :visible.sync="goDownShow" width='300px' center = 'true'>
		 	<el-row style='text-align: center;'>
		 		 <el-date-picker
			      v-model="goDownDay"
			      type="datetime"
			      value-format="yyyy-MM-dd HH:mm:ss"
			      placeholder="选择日期时间">
			    </el-date-picker>
		 	</el-row>
		    
		    <div slot="footer" class="dialog-footer">
			    <el-button size='small' @click="goDownShow = false">取 消</el-button>
			    <el-button size='small' :disabled='ifSubmit' type="primary" @click="submitGoDown">确 定</el-button>
			</div>
		</el-dialog>
      </MainContent>
   </div>
</template>
<script>
	import MainContent from '../components/main_content'
	import global from './global'
	export default {
    name: "UserManage",
    inject:['reload'],
    mounted(){
    	this.initData('1');
    },
    data() {
    	return {
    		title: '用户管理',
    		userListData: [],
    		goDownShow: false,
    		ifSubmit: false,
    		userGoDownId: '',
    		allPage: '',
    		currentPage: '1',
    		goDownDay: '',
			UserInput:""
    	}
    },
    components:{
    	MainContent
    },
    methods:{
    	initData(pageNum){
    		let _this = this;
    		global.$http({
						method:'get',
						url:global.urlAll+'ShowAllUsers/',
						headers:{
							'Content-Type':'application/x-www-form-urlencoded',
							'cache-control': 'no-cache, no-store',
							'Pragma': 'no-cache'
						},
						params:{
							Page: pageNum || '1',
							keyWord:_this.UserInput,
							Row: '10'
						}
					}).then((res)=>{
						if(res.data.success == 'true'){
							_this.userListData = res.data.data;
							_this.allPage = res.data.DateNum;
							
						}else{
							_this.$message(res.msg)
						}
					})
    	},
    	SearchUser(){
				let _this = this;
				this.currentPage = '1';
				this.initData('1')
    		
    	},
    	TaoBaoConfirm(){
    		this.$router.push('/UserTao')
    	},
    	//打开拉黑弹出
    	userGoDown(index,row){
				//判断是拉黑操作还是恢复操作
				if(row.IsBlack=="1"){
					
					//恢复
					let _this = this;
						global.$http({
								method:'get',
								url:global.urlAll+'DeleteBlackUsers/',
								headers:{
									'Content-Type':'application/x-www-form-urlencoded',
									'cache-control': 'no-cache, no-store',
									'Pragma': 'no-cache'
								},
								params:{
									UserNo: row.UserNo,
								}
							}).then((res)=>{
								if(res.data.success == 'true'){
									_this.$message('恢复成功');
									_this.initData();
									
								}else{
									_this.$message(res.msg)
								}
							})				
				}else{
					//拉黑
    		this.goDownShow = true;
    		this.userGoDownId = row.UserNo					
				}
    	},
    	submitGoDown(){
    		if(this.goDownDay == ''){
    			this.$message('拉黑天数不能为空')
    		}else{
    			this.ifSubmit = true;
    			let _this = this;
    			global.$http({
						method:'get',
						url:global.urlAll+'BecameUserBlack/',
						headers:{
							'Content-Type':'application/x-www-form-urlencoded',
							'cache-control': 'no-cache, no-store',
							'Pragma': 'no-cache'
						},
						params:{
							UserNo: _this.userGoDownId,
							Time: _this.goDownDay,
						}
					}).then((res)=>{
						if(res.data.success == 'true'){
							_this.ifSubmit = false;
    						_this.goDownShow = false;
    						_this.initData();
								_this.$message("拉黑成功")
						}else{
							_this.$message(res.msg)
						}
					})
    			
    		}
    	},
    	handleCurrentChange(val){
    		let _this = this;
    		this.currentPage = val;
    		this.initData(val)
    	}
    },
   }
	
	
</script>

<style scoped="scoped">
	.content_title {
	padding-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    
  }
  .confirmE{
  	width: 150px;
  	height: 40px;
  	background: #FA8819;
  	color: #FFFFFF;
    font-weight: bold;
    border-radius: 4px;
  }
  .table_content{
  	padding: 20px;
  	background: #FFFFFF;
  }
  table,tbody,thead {
	  width: 100% !important;
	}
	colgroup {
	  position: absolute;
	  width: 100% !important;
	  display: flex;
	}
	col {
	  flex: 1;
	  text-align: center;
	}
</style>